<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骑行，发现生活更美好</title>
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        #canpic {
            display: block;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        function computeSize() {
            var rate = ((document.documentElement.clientWidth || document.body.clientWidth) * 100) / 750;
            document.querySelector('html').style.fontSize = rate + 'px'
        }
        computeSize();
        window.addEventListener("resize", computeSize);
    </script>
</head>
<body>
<div id="wrapper">
    <div id="topBar">
        <a href="javascript:history.back(-1)">&lt;&nbsp;返回</a>
        <a href="#" id="ok">下一步</a>
    </div>
    <div id="img_box" class="nine-ge" style="display: none">
        <div id="upimg" class="pic">

            <img id="pic0" src="../images/未标题-1_09.png" data-id="0" />
            <img id="pic1" src="../images/未标题-1_11.png" data-id="1" />
            <img id="pic2" src="../images/未标题-1_13.png" data-id="2" />
            <img id="pic3" src="../images/未标题-1_23.png" data-id="3" />
            <img id="pic4" src="../images/未标题-1_25.png" data-id="4" />
            <img id="pic5" src="../images/未标题-1_27.png" data-id="5" />
            <img id="pic6" src="../images/未标题-1_37.png" data-id="6" />
            <img id="pic7" src="../images/未标题-1_39.png" data-id="7" />
            <img id="pic8" src="../images/未标题-1_41.png" data-id="8" />

        </div>
    </div>
    <div id="complete">
        <div id="nine">
            <canvas id="cv0" data-canvas="0"></canvas>
            <canvas id="cv1" data-canvas="1"></canvas>
            <canvas id="cv2" data-canvas="2"></canvas>
            <canvas id="cv3" data-canvas="3"></canvas>
            <canvas id="cv4" data-canvas="4"></canvas>
            <canvas id="cv5" data-canvas="5"></canvas>
            <canvas id="cv6" data-canvas="6"></canvas>
            <canvas id="cv7" data-canvas="7"></canvas>
            <canvas id="cv8" data-canvas="8"></canvas>
        </div>
        <div class="com-foot">
            <img src="../images/nearby.png">
        </div>
    </div>
    <div id="filter">
        <div class="topper">
            <a href="#" class="cur">阳光</a>
            <a href="#">色彩</a>
            <a href="#">经典</a>
        </div>
        <div class="btm-box">
            <div class="swiper-container">
                <div id="down" class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="0" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine1" data-class="1" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine2" data-class="2" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine3" data-class="3" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine4" data-class="4" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine5" data-class="5" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>

            <div class="swiper-container">
                <div id="down" class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="0" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine1" data-class="1" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine2" data-class="2" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine3" data-class="3" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine4" data-class="4" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine5" data-class="5" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>

            <div class="swiper-container">
                <div id="down" class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="0" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine1" data-class="1" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine2" data-class="2" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine3" data-class="3" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine4" data-class="4" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine5" data-class="5" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
    </div>
    <div id="camera">
        <img src="../images/camera.png">
        <input type="file" name="file_head" id="file_head" multiple onchange="javascript:setImagePreview();" />
    </div>


    <div id="can"></div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/index.js"></script>
<script src="../js/html2canvas.min.js"></script>
<script src="../js/commin.js"></script>
<script src="../js/color.js"></script>
<!--<script src="../js/canvas9.js"></script>-->
<script src="../js/new.js"></script>
<script src="../js/gloomyflshfilter.js"></script>
<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        scrollbarDraggable: false,
        slidesPerView : 6,
        spaceBetween : 50,
        scrollbarSnapOnRelease : true
    });
</script>
</body>
</html>